<template>
  <div class="cal-mask">
    <i class="close el-icon-circle-close" @click="closeCal"></i>
    <!-- 校历 -->
    <div class="swiper-box">
      <div class="swiper-contain" ref="swiperContain">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(item, index) in srcList"
            :key="index"
          >
            <img :src="item" alt="" />
          </div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination">
          <span
            v-for="(item, index) in srcList"
            :key="index"
            :class="activeIn == index ? 'active' : ''"
            @click="changePage(index)"
          ></span>
        </div>
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev" @click="prevPage"></div>
        <div class="swiper-button-next" @click="nextPage"></div>
      </div>
    </div>
  </div>
</template>

<script>
import Swiper from "swiper";
export default {
  data() {
    return {
      swiper: null,
      activeIndex: 0,
      srcList: [
        require("@/assets/images/jdxl2019.jpg"),
        require("@/assets/images/xl2020.jpg"),
        require("@/assets/images/xl2021.jpg")
      ]
    };
  },
  computed: {
    activeIn() {
      let activeIndex = 0;
      if (this.activeIndex <= this.srcList.length) {
        activeIndex = this.activeIndex;
      } else {
        activeIndex = this.activeIndex - 3;
      }
      if (activeIndex == 0) {
        return this.srcList.length - 1;
      }
      return activeIndex - 1;
    }
  },
  beforeDestroy() {
    this.swiper.destroy();
  },
  methods: {
    changePage(index) {
      this.swiper.slideToLoop(index);
    },
    prevPage() {
      this.swiper.slidePrev();
    },
    nextPage() {
      this.swiper.slideNext();
    },
    swiperInit() {
      const that = this;
      this.swiper = new Swiper(this.$refs.swiperContain, {
        autoplay: false,
        loop: true,
        on: {
          slideChangeTransitionEnd: function() {
            // console.log('this.activeIndex',this.activeIndex)
            that.activeIndex = this.activeIndex;
          }
        }
        // 如果需要分页器
        // pagination: {
        //   el: '.swiper-pagination',
        // },
        // navigation: {
        //   nextEl: '.swiper-button-next',
        //   prevEl: '.swiper-button-prev',
        // }
      });
    },
    closeCal() {
      this.$emit("closeCal", true);
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.swiperInit();
    });
  }
};
</script>

<style scoped lang="scss">
.cal-mask {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.3);
  width: 100vw;
  height: 100vh;
  padding-top: 90px;
  z-index: 500;
  .close {
    font-size: 30px;
    position: absolute;
    right: 15px;
    top: 30px;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
  }
  .swiper-box {
    animation: topTo 0.5s;
    position: relative;
  }
  .swiper-contain {
    // height: 600PX;
    .swiper-wrapper {
      margin-bottom: 10px;
      .swiper-slide {
        // height: 500PX;
        text-align: center;
        img {
          width: 70%;
          margin: 0 auto;
        }
      }
    }

    .swiper-pagination {
      position: absolute;
      width: 100%;
      display: block;
      span {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 0 5px;
        border-radius: 50%;
        background-color: #999;
        transition: 0.3s;
        cursor: pointer;
      }
      .active {
        cursor: default;
        background-color: #fff;
      }
    }
  }
}
@keyframes topTo {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}
</style>
